<template>
	<view class="box">
		<!-- 搜索view -->
		<view class="searchGood">
			<view class="search">
				<view class="shop-font">商品</view>
				<!-- 搜索框-->
				<input type="text" @confirm="enterSea" v-model="searchStr" class="input" placeholder="请输入商品名称" />
			</view>
			<view class="sea-font" @click="clickSea">搜索</view>
		</view>
		<view v-show="seaActive == 0">
			<!-- 最近搜索 -->
			<view class="recently">
				<view class="title">
					<image src="/static/my/a-shijianzuijin.png" mode=""></image>
					<view class="title-font">最近搜搜</view>
				</view>
				<!-- 搜索列表 -->
				<view class="sea-font-list">
					<view @click="seaName(item.value)" class="sea-font-list-item" v-for="(item, i) in seaList" :key="i">
						{{ item.value }}
					</view>
				</view>
			</view>
			<!-- 热门关键词 -->
			<view class="recently">
				<view class="title">
					<image src="/static/my/faxianjihuo.png" mode=""></image>
					<view class="title-font">热门关键词</view>
				</view>
				<!-- 搜索列表 -->
				<view class="sea-font-list">
					<view @click="seaName(item.value)" class="sea-font-list-item" v-for="(item, i) in seaHotList"
						:key="i">{{ item.value }}</view>
				</view>
			</view>
		</view>
		<view v-show="seaActive == 1">
			<view class="no-img" v-if="goodsList.length == 0">
				<img src="../../../static/search/noSearch.png" alt="">
			</view>
			<view v-else>
				<!-- 下拉菜单 -->
				<van-dropdown-menu>
					<van-dropdown-item v-model="value1" :options="option1" />
					<van-dropdown-item v-model="value2" :options="option2" />
				</van-dropdown-menu>
				<!-- 商品列表 -->
				<view class="good-list">
					<view class="good-list-item" @click="skip(item.id, item.goods_id)" v-for="item in goodsList"
						:key="item.id">
						<image :src="item.goods_img" mode=""></image>
						<view class="name">
							{{item.goods_name}}
						</view>
						<view class="price">
							￥{{item.goods_price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入api
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				seaActive: 0,
				searchStr: "",
				// 搜索内容列表
				seaList: [],
				// 热门搜索关键词
				seaHotList: [],
				// 商品列表
				goodsList: [],
				value1: 0,
				value2: "a",
				option1: [{
						text: '全部商品',
						value: 0
					},
					{
						text: '新款商品',
						value: 1
					},
					{
						text: '活动商品',
						value: 2
					},
				],
				option2: [{
						text: '默认排序',
						value: 'a'
					},
					{
						text: '好评排序',
						value: 'b'
					},
					{
						text: '销量排序',
						value: 'c'
					},
				]
			}
		},
		methods: {
			// 查看是否有搜索数据
			getStorage() {
				// 获取数据
				const data = uni.getStorageSync('searchGoods');
				if (data) {
					this.seaList = JSON.parse(data);
				} else {
					console.log("没有搜索数据");
				}
			},
			// 点击搜索
			clickSea() {
				const seaData = {
					value: this.searchStr
				}
				this.seaList.unshift(seaData);
				uni.setStorageSync('searchGoods', JSON.stringify(this.seaList));
				// 判断搜索的长度是否大于9
				if (this.seaList.length > 8) {
					// 删除最后一个
					this.seaList.pop();
					uni.setStorageSync('searchGoods', JSON.stringify(this.seaList));
				}
				this.search();
			},
			// 回车搜搜
			enterSea() {
				const seaData = {
					value: this.searchStr
				}
				this.seaList.unshift(seaData);
				uni.setStorageSync('searchGoods', JSON.stringify(this.seaList));
				// 判断搜索的长度是否大于9
				if (this.seaList.length > 8) {
					// 删除最后一个
					this.seaList.pop();
					uni.setStorageSync('searchGoods', JSON.stringify(this.seaList));
				}

				console.log(this.seaList);
				this.search();
			},
			// 搜索商品
			search() {
				api.searchGoods({
					page: "1",
					limit: "10",
					name: this.searchStr
				}).then(res => {
					if (res.data.status == 200) {
						this.seaActive = 1;
						this.goodsList = res.data.data.goodsList;
					}
				});
			},
			// 跳转商品详情
			skip(id, goods_id) {
				uni.navigateTo({
					url: `/pages/goods/goods_details/goods_details?id=${id}&goods_id=${goods_id}`
				})
			},
			// 点击最近搜索
			seaName(item) {
				api.searchGoods({
					page: "1",
					limit: "10",
					name: item
				}).then(res => {
					if (res.data.status == 200) {
						this.seaActive = 1;
						this.goodsList = res.data.data.goodsList;
					}
				});
			}

		},
		onLoad() {
			// 设置搜索页面title
			uni.setNavigationBarTitle({
				title: "搜索"
			});
			// 查看是否有搜索数据
			this.getStorage();
			// 获取热门关键词
			api.getHotSea().then(res => {
				// 获取失败
				if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
				this.seaHotList = res.data.data.goodsHotSea;
				uni.$showMsg(res.data.msg);
			});
		}
	}
</script>

<style>
	.box {
		height: 100%;
	}

	/* 搜索view */
	.searchGood {
		margin: 0 auto;
		width: 650rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.searchGood .search {
		width: 550rpx;
		height: 75rpx;
		border-radius: 7px;
		background-color: #EFF2F5;
		display: flex;
	}

	.shop-font {
		width: 120rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		position: relative;
		font-size: 14px;
	}

	.shop-font::before {
		content: "";
		position: absolute;
		border-left: 1px solid #DDDEDE;
		height: 40rpx;
		right: 0;
		top: 18rpx;
	}

	/* 搜索框 */
	.input {
		font-size: 13px;
		height: 75rpx;
		padding-left: 27rpx;
	}

	.sea-font {
		padding-left: 30rpx;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 14px;
		color: red;
	}

	/* 最近搜索 */
	.recently {
		margin: 10px auto;
		width: 650rpx;
	}

	.recently .title {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #D1D1D1;
	}

	.recently .title image {
		width: 35rpx;
		height: 35rpx;
	}

	.title-font {
		margin-left: 10rpx;
	}

	/* 搜索列表 */
	.sea-font-list {
		margin: 10px auto;
		width: 650rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.sea-font-list .sea-font-list-item {
		margin: 10rpx 10rpx;
		text-align: center;
		line-height: 30px;
		padding: 5rpx 25rpx;
		border-radius: 38rpx;
		font-size: 14px;
		color: #808080;
		background-color: #F3F3F3;
	}

	.no-img {
		margin-top: 20rpx;
		width: 100%;
		height: 176px;
		display: flex;
		align-content: center;
		justify-content: center;
	}

	.no-img img {
		width: 216px;
		height: 176px;
	}

	.good-list {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.good-list-item {
		width: 49%;
		margin-bottom: 15px;
		border-radius: 10px 10px 0 0;
		box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, .03);
		padding-bottom: 5px;
		border-radius: 7px;
	}

	.good-list-item image {
		border-radius: 7px 7px 0 0px;
		width: 100%;
		height: 175px;
	}

	.good-list-item .name {
		font-size: 14px;
		color: #282828;
		margin-top: 10px;
		padding: 0 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.good-list-item .price {
		font-size: 14px;
		margin-top: 4px;
		padding: 0 5px 0px 5px;
		color: #FD502F;
	}
</style>